<div class="flex flex-col px-4 py-2">
    <div class="text-lg">
        <label class="text-xl">{{ 'PAC.KEY_WORDS.Cube' | translate: {Default: 'Cube'} }}</label>
    </div>
    <div class="flex justify-between">
        <div class="opacity-80"><span>{{entityType?.caption}}</span>(<span>{{ cubeGrant.cube }}</span>)</div>
        <div class="flex justify-end items-center text-sm">
            <label class="text-sm">
                {{ 'PAC.MODEL.AccessControl.DefaultAccess' | translate: {Default: 'Default Access'} }}:
            </label>
            <mat-radio-group class="ngm-radio-group__horizontal text-sm text-bluegray-800" displayDensity="compact"
                [ngModel]="cubeGrant.access"
                (change)="changeCubeAccess($event)"
                (click)="$event.stopPropagation()">
                <mat-radio-button [value]="Access.all">{{ 'PAC.MODEL.AccessControl.Access_all' | translate: {Default: 'All'} }}</mat-radio-button>
                <mat-radio-button [value]="Access.custom">{{ 'PAC.MODEL.AccessControl.Access_custom' | translate: {Default: 'Custom'} }}</mat-radio-button>
                <mat-radio-button [value]="Access.none">{{ 'PAC.MODEL.AccessControl.Access_none' | translate: {Default: 'None'} }}</mat-radio-button>
            </mat-radio-group>
        </div>
    </div>
</div>

<div class="pac-model-access-cube__hierarchy-list">

    <mat-accordion class="pac-model__accordion">
        <mat-expansion-panel hideToggle class="mat-elevation-z" [class.pac-model-access__hierarchy-hidden]="hierarchyGrant.access===Access.none"
            *ngFor="let hierarchyGrant of hierarchyGrants$ | async; trackBy: trackByName"
            [disabled]="hierarchyGrant.access===Access.none"
            [expanded]="hierarchyGrant.access!==Access.none"
            (opened)="openedHierarchy(hierarchyGrant.hierarchy)"
        >
            <mat-expansion-panel-header>
                <mat-panel-title class="text-base">
                    <ngm-display-behaviour [option]="{value: hierarchyGrant.hierarchy, label: hierarchyGrant.caption}"></ngm-display-behaviour>
                </mat-panel-title>
                <mat-panel-description class="flex justify-end items-center gap-4 text-base">
                    <div class="flex justify-end items-center gap-2">
                        <span class="whitespace-nowrap hidden md:inline-block">
                            {{ 'PAC.MODEL.AccessControl.RollupPolicy' | translate: {Default: 'Rollup Policy'} }}:
                        </span>
                        <mat-button-toggle-group name="rollupPolicy" displayDensity="compact" ngmAppearance="color" color="primary"
                            [disabled]="hierarchyGrant.access===Access.none"
                            [ngModel]="hierarchyGrant.rollupPolicy"
                            (change)="changeRollupPolicy($event, hierarchyGrant.hierarchy)"
                            (click)="$event.stopPropagation()">
                            <mat-button-toggle [value]="RollupPolicy.full">{{ 'PAC.MODEL.AccessControl.RollupPolicy_full' | translate: {Default: 'Full'} }}</mat-button-toggle>
                            <mat-button-toggle [value]="RollupPolicy.partial">{{ 'PAC.MODEL.AccessControl.RollupPolicy_partial' | translate: {Default: 'Partial'} }}</mat-button-toggle>
                            <mat-button-toggle [value]="RollupPolicy.hidden">{{ 'PAC.MODEL.AccessControl.RollupPolicy_hidden' | translate: {Default: 'Hidden'} }}</mat-button-toggle>
                        </mat-button-toggle-group>
                    </div>

                    <div class="flex justify-end items-center gap-2">
                        <span class="whitespace-nowrap hidden md:inline-block">
                            {{ 'PAC.MODEL.AccessControl.DefaultAccess' | translate: {Default: 'Default Access'} }}:
                        </span>
                        <mat-button-toggle-group name="access" displayDensity="compact" ngmAppearance="color" color="primary"
                            [ngModel]="hierarchyGrant.access"
                            (change)="changeHierarchyAccess($event, hierarchyGrant.hierarchy)"
                            (click)="$event.stopPropagation()">
                            <mat-button-toggle [value]="Access.all">{{ 'PAC.MODEL.AccessControl.Access_all' | translate: {Default: 'All'} }}</mat-button-toggle>
                            <mat-button-toggle [value]="Access.custom">{{ 'PAC.MODEL.AccessControl.Access_custom' | translate: {Default: 'Custom'} }}</mat-button-toggle>
                            <mat-button-toggle [value]="Access.none">{{ 'PAC.MODEL.AccessControl.Access_none' | translate: {Default: 'None'} }}</mat-button-toggle>
                        </mat-button-toggle-group>
                    </div>
                    
                    <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="pac-nav-tab__close"
                        (click)="removeHierarchy(hierarchyGrant.hierarchy)">
                        <mat-icon fontSet="material-icons-outlined">cancel</mat-icon>
                    </button>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-container *ngIf="hierarchyGrant.access===Access.custom">
                <div class="w-full flex justify-start items-center gap-4">
                    <div class="pac-model-access__level pac-cdk-drop__list pac-cdk-drop__area flex-1 flex items-center h-8"
                        cdkDropList
                        [cdkDropListEnterPredicate]="getDropLevelPredicate(hierarchyGrant.hierarchy)"
                        (cdkDropListDropped)="dropLevel($event, 'topLevel', hierarchyGrant.hierarchy)">
                        <label>{{ 'PAC.MODEL.AccessControl.TopLevel' | translate: {Default: 'Top Level'} }}:</label>
                        <div *ngIf="hierarchyGrant.topLevel" class="flex-1 flex justify-around items-center">
                            <ngm-display-behaviour style="flex: 1;" [option]="{value: hierarchyGrant.topLevel, label: hierarchyGrant.topLevelCaption}"></ngm-display-behaviour>
                            <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" (click)="removeTopLevel(hierarchyGrant.hierarchy)">
                                <mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
                        </div>
                    </div>
                    <div class="pac-model-access__level pac-cdk-drop__list pac-cdk-drop__area flex-1 flex items-center h-8"
                        cdkDropList
                        [cdkDropListEnterPredicate]="getDropLevelPredicate(hierarchyGrant.hierarchy)"
                        (cdkDropListDropped)="dropLevel($event, 'bottomLevel', hierarchyGrant.hierarchy)">
                        <label>{{ 'PAC.MODEL.AccessControl.BottomLevel' | translate: {Default: 'Bottom Level'} }}:</label>
                        <div *ngIf="hierarchyGrant.bottomLevel" class="flex-1 flex justify-around items-center">
                            <ngm-display-behaviour [option]="{value: hierarchyGrant.bottomLevel, label: hierarchyGrant.bottomLevelCaption}" style="flex: 1;"></ngm-display-behaviour>
                            <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" (click)="removeBottomLevel(hierarchyGrant.hierarchy)">
                                <mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
                        </div>
                    </div>
                </div>

                <div class="pac-model-access__members pac-cdk-drop__list"
                    cdkDropList
                    [cdkDropListEnterPredicate]="dropMemberPredicate(hierarchyGrant.hierarchy)"
                    (cdkDropListDropped)="dropMember($event, hierarchyGrant)">
                    <div class="flex justify-between items-center p-2">
                        <div class="flex items-center">
                            <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="pac-nav-tab__close"
                                (click)="clearMembers(hierarchyGrant.hierarchy)">
                                <mat-icon fontSet="material-icons-outlined">clear_all</mat-icon>
                            </button>
                            <span >{{ 'PAC.KEY_WORDS.Member' | translate: {Default: 'Member'} }}</span>
                        </div>
                        <span>{{ 'PAC.MODEL.AccessControl.Access' | translate: {Default: 'Access'} }}</span>
                    </div>
                    <mat-divider></mat-divider>
                    <mat-list role="list" class="pac-cdk-drop__list" displayDensity="compact"
                        cdkDropList
                        (cdkDropListDropped)="dropSortMember($event, hierarchyGrant)">
                        <mat-list-item role="listitem" class="pac-cdk-drop-item" [class.pac-model-access__member-hidden]="memberGrant.access===Access.none"
                            *ngFor="let memberGrant of hierarchyGrant.memberGrants" cdkDrag>
                            <div class="flex justify-between items-center">
                                <div class="flex-1 flex justify-between items-center mr-4">
                                    <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="pac-nav-tab__close"
                                        (click)="removeMember(hierarchyGrant.hierarchy, memberGrant.member)">
                                        <mat-icon fontSet="material-icons-outlined">cancel</mat-icon>
                                    </button>
                                    <ngm-display-behaviour class="flex-1"
                                        [option]="{
                                            value: memberGrant.member,
                                            label: memberGrant.caption
                                        }">
                                    </ngm-display-behaviour>
                                </div>

                                <mat-slide-toggle [ngModel]="memberGrant.access===Access.all"
                                    (change)="changeMemberAccess($event, hierarchyGrant.hierarchy, memberGrant.member)">
                                </mat-slide-toggle>
                            </div>
                        </mat-list-item>
                    </mat-list>

                </div>
            </ng-container>
        </mat-expansion-panel>
    </mat-accordion>

    <div class="pac-cdk-drop__list pac-cdk-drop__area h-52 min-h-[120px] w-full mt-4 border-2 border-dashed rounded-lg"
        cdkDropList
        [cdkDropListEnterPredicate]="dropHierarchyPredicate"
        (cdkDropListDropped)="dropHierarchy($event)">
        <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
            <svg width="100" height="100">
                <circle cx="50" cy="50" r="40" fill="#80808050"/>
                <rect x="25" y="48" width="50" height="4" fill="white"/>
                <rect x="48" y="25" width="4" height="50" fill="white"/>
            </svg>

            <p class="mb-2 text-sm">{{ 'PAC.MODEL.AccessControl.DragandDropAddDimension' | translate: {Default: 'Drag and drop to add dimension'} }}</p>
        </div>
    </div>
</div>
